<template>
  <div class="emoji-wrapper">
    <ul>
      <li v-for="(emoji,emojiIndex) in emojiList" :key="emojiIndex" @click="handleClickEmoji(emoji)">
        <!-- <span :class="['emoji',handleEmoji(emoji)]"></span> -->
        <span :class="['emoji',emoji]"></span>
      </li>
    </ul>
  </div>
</template>
<script>
const COMPONENT_NAME = 'guodeEmoji'
import Emojis from '@/common/plugins/emoji/map'
// import { encodeEmoji } from '@/common/plugins/emoji'

export default {
  name: COMPONENT_NAME,
  props: {},
  data() {
    return {
      emojiList: Emojis,
    }
  },
  methods: {
    // handleEmoji(name) {
    //   return encodeEmoji(name)
    // },
    handleClickEmoji(item){
      this.$emit('emojiClick', item)
    }
  },
}
</script>

<style lang="scss">
@import '@/common/plugins/emoji/index.scss';
.emoji-wrapper {
  ul {
    display: flex;
    flex-wrap: wrap;
    > li {
      padding: 6px;
      &:hover {
        background: #eee;
      }
    }
  }
}
</style>